<template>
  <view class="star">
    <u-swiper
      :list="list1"
      height="10"
      previousMargin="30"
      nextMargin="30"
      circular
      :autoplay="false"
      radius="5"
      bgColor="transparent"
      @change="change"
      @click="click"
    ></u-swiper>
    <view class="title"> 十二星座运势 </view>

    <view
      class="theme"
      v-for="(item, index) in starsign"
      :key="index"
      @click="starEnter(item.type, item.img)"
    >
      <view class="container flex-align">
        <image :src="item.img" mode="scaleToFill" />
        <view class="msg">
          <view class="name flex-align">
            {{ item.name }} <view class="time">{{ item.time }}</view></view
          >
          <view class="fortune flex-align"
            >整体运势：
            <u-rate
              :count="count"
              :modelValue="item.num"
              readonly
              active-color="#ffca2a"
            ></u-rate
          ></view>
          <view class="content"> {{ item.text }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { type } from '@/uni_modules/uni-forms/components/uni-forms/utils'
import { ref } from 'vue'
const list1 = ref([
  'https://bpic.51yuansu.com/backgd/cover/00/12/43/5b7b573e3f1c1.jpg?x-oss-process=image/resize,w_780/sharpen,100',
  'https://bpic.51yuansu.com/backgd/cover/00/00/97/5b4f0471c997b.jpg?x-oss-process=image/resize,w_780/sharpen,100',
  'https://bpic.51yuansu.com/backgd/cover/00/03/70/5b5b1593a2228.jpg?x-oss-process=image/resize,w_780/sharpen,100'
])
// 星座列表
const count = ref(5)
const starsign = ref([
  {
    name: '白羊座',
    time: '3.21-4.19',
    img: 'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/image/%E7%99%BD%E7%BE%8A%E5%BA%A7.jpg',
    text: '心想事成的一天，整体运势非常不错，将会是收获满',
    num: 5,
    type: 'aries'
  },
  {
    name: '金牛座',
    time: '4.20-5.20',
    img: 'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/image/%E9%87%91%E7%89%9B%E5%BA%A7.jpg',
    text: '你的人际关系不错，不妨抓住这个优势创造条件，会有不错的收获',
    num: 5,
    type: 'taurus'
  },
  {
    name: '双子座',
    time: '5.21-6.20',
    img: 'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/image/%E5%8F%8C%E5%AD%90%E5%BA%A7.jpg',
    text: '过于感性的一天，这会让你很容易被情绪牵着鼻子走，容易受到外界的干扰',
    num: 3,
    type: 'gemini'
  },
  {
    name: '巨蟹座',
    time: '6.21-7.22',
    img: 'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/image/%E5%B7%A8%E8%9F%B9%E5%BA%A7.jpg',
    text: '将维持固有的现状，暂时没有迎来突破与改变。这可能需要你更多的耐心与细心',
    num: 4,
    type: 'cancer'
  },
  {
    name: '狮子座',
    time: '7.23-8.22',
    img: 'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/image/%E7%8B%AE%E5%AD%90%E5%BA%A7.jpg',
    text: '冲动行事容易在某些事情上吃瘪，因此提醒你要注意控制好自己的情绪',
    num: 3,
    type: 'leo'
  },
  {
    name: '处女座',
    time: '8.23-9.22',
    img: 'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/image/%E5%A4%84%E5%A5%B3%E5%BA%A7.jpg',
    text: '有很多与人打交道的机会，不过你能够将选择权掌握在自身的能力范围之内',
    num: 5,
    type: 'virgo'
  },
  {
    name: '天秤座',
    time: '9.23-10.22',
    img: 'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/image/%E5%A4%A9%E6%9E%B0%E5%BA%A7.jpg',
    text: '物质与精神富足的一天，你有着满满的干劲。你可能会因为一些小事而感到烦恼和痛苦。但不要灰心丧气，要相信自己的能力，事情总会过去',
    num: 5,
    type: 'libra'
  },
  {
    name: '天蝎座',
    time: '10.23-11.21',
    img: 'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/image/%E5%A4%A9%E8%9D%8E%E5%BA%A7.jpg',
    text: '需要应对复杂的人际关系，建议继续保持防人之心,但不要轻易向对方吐露自己的想法',
    num: 4,
    type: 'scorpio'
  },
  {
    name: '射手座',
    time: '11.22-12.21',
    img: 'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/image/%E5%B0%84%E6%89%8B%E5%BA%A7.jpg',
    text: '自信不足的一天，你很容易受旁人想法与建议的影响，因此需要保持冷静与理智',
    num: 3,
    type: 'sagittarius'
  },
  {
    name: '摩羯座',
    time: '12.22-1.19',
    img: 'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/image/%E9%AD%94%E8%9D%8E%E5%BA%A7.jpg',
    text: '过于计较小事可能会让你忽略更重要的事情。你可能需要多花点时间来处理一些事情',
    num: 3,
    type: 'capricorn'
  },
  {
    name: '水瓶座',
    time: '1.20-2.18',
    img: 'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/image/%E6%B0%B4%E7%93%B6%E5%BA%A7.jpg',
    text: '受好奇心驱使的一天，有着很强的主动性。你可能会因为一些小事而感到烦恼和痛苦。但不要灰心丧气，要相信自己的能力，事情总会过去',
    num: 5,
    type: 'aquarius'
  },
  {
    name: '双鱼座',
    time: '2.19-3.20',
    img: 'https://xddserver.oss-cn-guangzhou.aliyuncs.com/blog/image/%E5%8F%8C%E9%B1%BC%E5%BA%A7.jpg',
    text: '需要保持独立的思考的一天，你有机会解决一些疑问，但不要轻易向对方吐露自己的想法',
    num: 4,
    type: 'pisces'
  }
])
// 进入星座详情
function starEnter(type, img) {
  uni.navigateTo({
    url: `/pagesA/calendar/starsignDdate?type=${type}&img=${img}`
  })
}
</script>

<style lang="scss" scoped>
.star {
  width: 100%;
  background-color: #f8f8f8;
  padding: 0 28rpx;
  padding-bottom: 40rpx;
  box-sizing: border-box;
  background: url('https://gd-hbimg.huaban.com/59c218c3dadde49c5a49865573a28d81f4ec4e281cb77a-iQe9Uj_fw658webp')
    no-repeat center;
  background-size: 100% 100%;
  .title {
    font-size: 36rpx;
    color: #64226f;
    font-weight: bold;
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
    &::after {
      margin-left: 20rpx;
      margin-top: 8rpx;
      content: '——————';
      display: block;
      color: #bbbbbb;
      font-size: 24rpx;
    }
    &::before {
      margin-right: 20rpx;
      margin-top: 8rpx;
      content: '——————';
      display: block;
      color: #bbbbbb;
      font-size: 24rpx;
    }
  }
  .theme {
    background-color: #ffffff;
    border-radius: 28rpx;

    margin-top: 20rpx;
    padding: 20rpx 28rpx;
    .container {
      width: 100%;
      border-radius: 8rpx;
      overflow: hidden;
      image {
        display: block;
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
      }
      .msg {
        width: 100%;
        flex: 1;
        margin-left: 20rpx;
        .name {
          color: #248ec5;
          font-weight: bold;
          font-size: 28rpx;
          .time {
            padding: 2rpx 10rpx;
            background-color: #f3b1c8;
            color: #ffffff;
            border-radius: 10rpx;
            font-weight: 400;
            margin-left: 8rpx;
          }
        }
        .fortune {
          margin-top: 10rpx;
          color: #515151;
        }
        .content {
          margin-top: 10rpx;
          color: gray;
          font-size: 24rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }
  }
}
</style>
